<template>
  <div class="comment_box">
    <div class="comment_left">
      <img :src="this.getUIR(cur_comment.user.img)" style="width: 40px; height: 40px; border-radius: 50%" alt="">
    </div>
    <div class="comment_right">
      <div class="comment_info">
        <p style="text-align: left; font-weight: bolder; margin: 5px 10px">{{ cur_comment.user.username }}</p>
        <span @click="like()" style="float: right">{{cur_comment.like >= 1000 ? (cur_comment.like - cur_comment.like % 1000) / 1000 + 'k' : cur_comment.like}}
          <van-icon  :name="getICON(cur_comment.is_liked)" /></span>
      </div>
      <p style="text-align: left; margin-left: 10px;margin-bottom: 0">{{ cur_comment.message }}</p>
      <p style="text-align: left;margin-left: 10px;font-size: small;color: rgb(186, 186, 186)">{{cur_comment.submit_time}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Comment",
  props: {
    comment: Object,
  },
  data(){
    return{
      cur_comment : {},
    }
  },
  created() {
    this.cur_comment = this.comment
  },
  methods:{
    like(){
      if (!this.cur_comment.is_liked){
        this.cur_comment.like ++
        this.cur_comment.is_liked = true
      }
    },
    getICON(like){
      if (like){
        return "good-job"
      }else{
        return "good-job-o"
      }
    }
  }
}
</script>

<style scoped lang="less">
.comment_box {
  display: flex;
}
.comment_right {
  width: 100%;
}
.comment_info {
  display: flex;
  justify-content: space-between;
}
</style>
